<template>
    <el-container style="height: 950px; border: 1px solid #eee">
        <!--搜索本科室患者姓名或患者病历号-->
        <el-aside width="350px">
            <el-container >
                <el-header >
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="searchForm"  :rules="rule" >
                        <!--<el-form-item :span="2" >
                            <el-select v-model="searchType" style="width:120px" >
                                <el-option :value="1" :label="'患者名：'" selected></el-option>
                                <el-option :value="2" :label="'病历号：'" selected></el-option>
                            </el-select>
                        </el-form-item>-->
                        <el-form-item  >
                            <el-input placeholder="请输入内容" v-model="medicalRecord.caseNumber"  class="input-with-select"  >
                                <template slot="prepend">病历号：</template>
                                <el-button slot="append" icon="el-icon-search" @click="search('searchForm')"></el-button>
                            </el-input>
                        </el-form-item>

                    </el-form>

                </el-header>
                <el-main style="height: 700px; border: 1px solid #eee ;padding: 0;margin: 0">
                    <el-tabs type="border-card" >
                        <el-tab-pane label="医技检查" >
                            <el-tag>患者：</el-tag>
                            <el-table ref="singleTable"
                                      :data="patients"
                                      highlight-current-row
                                      @current-change="handleCurrentChange01"
                                      @row-click="rowClick"
                                      style="width: 100%"
                                      size="mini">
                                <el-table-column   label="病历号" prop="caseNumber">
                                </el-table-column>
                                <el-table-column   label="姓名" width="80" prop="register.realName">
                                </el-table-column>
                            </el-table><br/><br/>

                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </el-aside>
        <el-container direction="vertical" style="height: 950px">
            <!--挂号基本信息-->
            <el-form ref="form" :model="form01" label-width="200px" size="mini" :inline="true" style="font-weight: 500;">
                <el-row>
                    <div style="font-size:large;text-align: center" >挂号基本信息</div>
                    <hr>
                </el-row>
                <el-row>
                    <el-form-item label="病历号:"  >
                        <div  style="color: rgba(0,4,71,0.7);font-weight: 700;width:100px;">{{form01.caseNumber}}</div>
                    </el-form-item>
                    <el-form-item label="患者姓名:" >
                        <div  style="color: rgba(0,4,71,0.7);font-weight: 700;width:100px;">{{form01.register.realName}}</div>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="本次看诊时间:" >
                        <el-date-picker v-model="form01.register.registTime" :disabled="true" size="mini" type="datetime" width="20px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="年龄:" label-width="79px">
                        <div style="color: rgba(0,4,71,0.7);font-weight: 700;width:100px;">{{form01.register.age}}{{form01.register.ageType}}</div>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="挂号科室:" >
                        <div  style="color: rgba(0,4,71,0.7);font-weight: 700;width:100px;">{{deptName}}</div>
                    </el-form-item>
                    <el-form-item label="挂号医生:" >
                        <div  style="color: rgba(0,4,71,0.7);font-weight: 700;width:100px;">{{docName}}</div>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="挂号级别:" >
                        <div  style="color: rgba(0,4,71,0.7);font-weight: 700;width:100px;">{{form01.register.registLeID}}</div>
                    </el-form-item>
                    <el-form-item label="检查建议:" >
                        <div  style="color: rgba(0,4,71,0.7);font-weight: 700;width:100px;">{{form01.proposal}}</div>
                    </el-form-item>
                </el-row>

                <!--待检项目-->
                <el-row style="background-color: #EAF1F5">
                    <el-col :span="24" style="margin-top: 4px;">
                        <el-tag size="mini">待检项目：</el-tag>
                    </el-col>
                </el-row>
                <el-row>
                    <el-table :data="checkApplies"    style="width: 100%">
                        <el-table-column prop="fmeditem.itemName" label="检验名称"  width="130px">
                        </el-table-column>
                        <el-table-column prop="position" label="检验部位"  width="100px">
                        </el-table-column>
                        <el-table-column prop="num" label="数量" width="50px">
                        </el-table-column>
                        <el-table-column prop="fmeditem.format" label="单位" width="50px">
                        </el-table-column>
                        <el-table-column prop="fmeditem.price" label="单价" width="50px">
                        </el-table-column>
                        <el-table-column
                                prop="fmeditem.price"
                                label="总金额"
                                :formatter="getTotal"
                                width="70px"
                        >
                        </el-table-column>
                        <el-table-column prop="state" label="状态" width="100px">
                            <template scope="scope">
                                <!--调用过滤器显示需要的数据 -->
                                <el-tag v-if="scope.row.state==2||scope.row.state==1" type="warning">{{scope.row.state|mState}}</el-tag>
                                <el-tag v-else-if="scope.row.state==3" type="primary">{{scope.row.state|mState}}</el-tag>
                                <el-tag v-else type="info">{{scope.row.state|mState}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作"  align="center">
                            <template slot-scope="scope">
                                <el-button type="primary"
                                           size="mini"
                                           :disabled="excutable(scope.$index, scope.row)"
                                           @click="excute(scope.$index, scope.row)"
                                >执行
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        :disabled="cancelExcutable(scope.$index, scope.row)"
                                        @click="cancelEcuxte(scope.$index, scope.row)">取消执行
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="info"
                                        :disabled="isUpload(scope.$index, scope.row)"
                                        @click="upResult(scope.$index, scope.row)">结果录入
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-form>
        </el-container>
        <!-- 结果录入弹窗 -->
        <el-dialog
                title="添加检查结果"
                :visible.sync="resultDialogVisible"
                width="30%" height="500px">
            <span>添加检查结果</span>
            <el-form :model="checkApply" status-icon :rules="rule" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <el-form-item label="" prop="result">
                    <el-input placeholder="请输入内容" type="textarea" rows='3' v-model="checkApply.result" class="input-with-select" style="width: 100%">
                        <template slot="prepend">疾病名称：</template>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="" prop="checkPass">
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            :action="`${host}/upload`"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                    >
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">选择检查结果图像，可以上传多张；只能上传jpg文件，且不超过2Mb</div>
                    </el-upload>
                </el-form-item>
            </el-form>


            <span slot="footer" class="dialog-footer">
              <el-button @click="resultDialogVisible = false" size="small">取 消</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload('ruleForm')">提交</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>
    import {HOST} from "../../common/config";
    export default {
        name: "check",
        data(){
            return{
                patients:[],//存放查找到的患者信息
                medicalRecord:{
                    caseNumber:'',
                },
                currentPatient:{
                    caseNumber:'',
                },
                searchType:1,//搜索类别
                formInline:{},
                rule:{
                    caseNumber:[
                        {required: true, message: '必填:病历号', trigger: 'blur'}
                    ],
                    result:[
                        {required: true, message: '必填:检查结果', trigger: 'blur'}
                    ]

                },
                form01:{
                    register:{},
                },
                checkApplies:[],//检验项目
                checkApply:{},//当前检验项目
                resultDialogVisible:false,//结果录入弹框可见性
                host:'',
                imageName: '', //上传的文件名,
                docName:'',//医生姓名
                deptName:'',//部门名称
            }
        },
        mounted:function(){
            this.getPatientInfo()
            this.host = HOST;
        },
        methods:{
            handleCurrentChange01(){

            },
            //根据病历搜索
            search(searchForm){
                console.log(this.medicalRecord.caseNum)
                this.$refs['searchForm'].validate((valid)=>{
                    console.log(valid)
                    if(valid){
                        this.getPatientInfo()
                    }
                })
            },
            //计算总金额
            getTotal(row,column){
                return row.fmeditem.price*row.num
            },
            getPatientInfo(){
                let path = `${HOST}/tech/getInfo`
                this.$ajax.post(path,this.medicalRecord).then((res)=>{
                    console.log(res)
                    this.patients = res.data
                })
            },
            //获取医生信息
            getDocInfo(id){
                console.log(id)
                let path = `${HOST}/user/getInfo/${id}`
                this.$ajax.get(path).then((res)=>{
                    this.docName = res.data.realName
                })
            },
            getDept(id){
                console.log(id)
                let path = `${HOST}/tech/getDept/${id}`
                this.$ajax.get(path).then((res)=>{
                    this.deptName = res.data.deptName
                })
            },
            //点击患者获得详细信息
            rowClick(row,column,val){
                this.form01=row
                this.currentPatient.caseNumber = row.caseNumber
                this.form01.register=row.register
                this.checkApplies = row.checkApplies
                let id = row.register.userID
                let did = row.register.deptID
                this.getDocInfo(id)
                this.getDept(did)
                console.log(row)
            },
            //执行按钮是否可操作
            excutable(index,row){
                if(row.state==3) return false;
                else return true;
            },
            //取消执行按钮是否可操作
            cancelExcutable(index,row){
                if(row.state==4) return false;
                else return true;
            },
            //上传结果按钮是否可操作
            isUpload(index,row){
                if(row.state==4) return false;
                else return true;
            },
            //执行
            excute(index,row){
                this.$confirm('确认要执行操作吗?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=> {
                        console.log(row)
                        this.checkApply = row
                        this.checkApply.state = 4
                        console.log(this.checkApply)
                        let path = `${HOST}/tech/updateCheck`
                        this.$ajax.post(path,this.checkApply).then((res)=>{
                            if(res.data.msg=='成功'){
                                this.$message({
                                    message:'已登记执行\"'+row.fmeditem.itemName+'\"!',
                                    type:'success'
                                })

                            }
                        }).catch(()=>{
                            this.checkApply.state = 3
                            this.$message({
                                message:'未能执行\"'+row.fmeditem.itemName+'\"!',
                                type:'warning'
                            })
                        })
                }).catch(()=>{
                    this.$message({
                        message:'已取消操作',
                        type:'info'
                    })
                })
            },
            //取消执行
            cancelEcuxte(index,row){
                this.$confirm('确认要取消这项检查吗?操作无法撤销哦！','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=> {
                    let state = row.state
                    this.checkApply = row
                    this.checkApply.state = 0
                    console.log(this.checkApply)
                    let path = `${HOST}/tech/updateCheck`
                    this.$ajax.post(path, this.checkApply).then((res) => {
                        if (res.data.msg == '成功') {
                            this.$message({
                                message: '已登记执行\"' + row.drugsName + '\"!',
                                type: 'success'
                            })

                        }
                    }).catch(() => {
                        this.checkApply.state = state
                        this.$message({
                            message: '未能执行\"' + row.drugsName + '\"!',
                            type: 'warning'
                        })
                    })
                }).catch(()=>{
                    this.$message({
                        message:'已取消操作',
                        type:'info'
                    })
                })
            },
            //点击上传
            upResult(index,row){
                this.resultDialogVisible=true
                this.checkApply = row
                console.log(this.checkApply)
            },
            //上传结果
            submitUpload(ruleForm){
                this.$refs[ruleForm].validate((valid)=> {
                    if (valid) {
                        console.log(this.checkApply)
                        this.$confirm('结果只能上传一次，确认要上传吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.resultDialogVisible=false
                            let state = this.checkApply.state
                            this.checkApply.state = 5
                            console.log(this.checkApply)
                            let path = `${HOST}/tech/updateCheck`
                            this.$ajax.post(path, this.checkApply).then((res) => {
                                if (res.data.msg == '成功') {
                                    this.$message({
                                        message: '已录入\"' + this.checkApply.fmeditem.itemName + '\"的结果!',
                                        type: 'success'
                                    })

                                }
                            }).catch(() => {
                                this.checkApply.state = state
                                this.$message({
                                    message: '未能录入\"' + this.checkApply.fmeditem.itemName + '\"的结果!',
                                    type: 'warning'
                                })
                            })
                        }).catch(() => {
                            this.$message({
                                message: '已取消操作',
                                type: 'info'
                            })
                        })
                        this.newDialogFormVisible=false
                    }else{
                        this.$message({
                            message:'请填写必要项目',
                            type:'warning'
                        })
                    }
                })
            },
            //上传成功的回调方法
            handleAvatarSuccess(res,file){
                console.log(res)
                this.imageName = res;
                // this.form.picture = res;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        filters:{
            mState(val){
                let result;
                switch(val){
                    case 1:
                        result='暂存'
                        break;
                    case 2:
                        result='已开立'
                        break;
                    case 3:
                        result='已缴费'
                        break;
                    case 4:
                        result='已登记'
                        break;
                    case 5:
                        result='执行完'
                        break;
                    case 6:
                        result='已退费'
                        break;
                    case 0:
                        result='已作废'
                        break;
                }
                return result;

            },
        }
    }
</script>

<style scoped>

</style>